<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
            background-image: url("https://game.gtimg.cn/images/lol/v3/topfoot-spr.png");
            /*行内元素无法直接修改宽高*/
            width: 21px;
            height: 21px;
            display: block;
            background-position: -381px -39px;
        }
        #i2{
            background-image: url("https://game.gtimg.cn/images/lol/v3/topfoot-spr.png");
            display: block;
            background-position: -303px -84px;
            width: 16px;
            height: 24px;
        }
        a{
            background-image: url("https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png");
            width: 200px;
            height: 54px;
            display: block;
        }
    </style>
</head>
<body>
<a href=""></a>
<i id="i1"></i>

<i id="i2"></i>
</body>
</html>